<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="get-id">
      <div class="get-class">
        <input name="get-name" type="text">
      </div>
      
      <div class="get-class"></div>
      <div class="get-class"></div>
    </div>
  </body>
  
  <script>
    /* Document.querySelector() 参数为选择器字符串，根据参数返回匹配到的第一个元素 */
    console.log(document.querySelector('#get-id'));//div#get-id{...}
    console.log(document.querySelector('.get-class'));//div.get-class{...}
    console.log(document.querySelector('input'));//input{...}
    
    /* Document.querySelectorAll() 参数为选择器字符串，根据参数返回匹配到的所有元素数组 */
    console.log(document.querySelectorAll('.get-class'));//NodeList(3) [div.get-class, div.get-class, div.get-class]
    console.log(document.querySelectorAll('div'));//NodeList(4) [div#get-id, div.get-class, div.get-class, div.get-class]
    
    /* Document.getElementById() 参数为id选择器字符串(id选择器在HTML中唯一)，根据参数返回匹配到的第一个元素 */
    console.log(document.getElementById('get-id'));//div#get-id{...}
    
    /* Document.getElementsByClassName() 参数为class选择器字符串，根据参数返回匹配到的所有元素数组 */
    console.log(document.getElementsByClassName('get-class'));//HTMLCollection(3) [div.get-class, div.get-class, div.get-class]
    
    /* Document.getElementsByNames() 参数为name属性值字符串，根据参数返回匹配到的所有元素数组 */
    console.log(document.getElementsByName('get-name'));//NodeList [input]
    
    /* Document.getElementsByTagNames() 参数为标签名称字符串，根据参数返回匹配到的所有元素数组 */
    console.log(document.getElementsByTagName('input'));//HTMLCollection [input, get-name: input]
  </script>
</html>